$(function () {
    // 需求1: 用户退出
    let layer = layui.layer
    $('#logout').on('click', function () {
        // 提示框
        layer.confirm('确认退出登录吗？', {
                icon: 3,
                title: '提示'
            },
            function (index) {
                // 跳转页面到登录页,清除token
                location.href = '/login.html'
                localStorage.removeItem = 'token'
                // 自动关闭对话框
                layer.close(index)
            })
    })

    // 需求2: 渲染用户名和头像
    getUserInfo()
})

// 获取用户信息,渲染用户名和头像功能封装
//   封装写到入口函数的外面
//   我要这个函数是全局函数,后面的修改用户信息和头像成功后,要
function getUserInfo() {
    axios({
        method: 'GET',
        url: '/my/userinfo',
        // headers: {
        //     Authorization: localStorage.getItem('token')
        // }
    }).then((res) => {
        // console.log(res.data);
        // 判断
        if (res.data.status !== 0) {
            return layui.layer.msg(res.data.message)
        }
        // 渲染用户名和头像
        renderUserInfo(res.data.data)
    })
}

function renderUserInfo(user) {
    // console.log(user)
    // 欢迎 名称 有要求,优先赋值昵称,不存在才赋值登录名称
    let name = user.nickname || user.username
    // 欢迎 赋值
    $('.welcome').html('欢迎&emsp;' + name)

    // 判断有没有图片头像
    if (user.user_pic == null) {
        // 没有图片头像,显示文字头像,隐藏图片头像
        $('.avatar-text').show().html(name[0].toUpperCase())
        $('.avatar-img').hide()
    } else {
        // 有图片头像,隐藏文字头像,显示图片偷袭
        $('.avatar-text').hide()
        // attr操作自定义属性,prop操作表单属性
        $('.avatar-img').show().attr('src', user.user_pic)
    }
}